<template>
  <div class="page">
    <div class="container">
      <div class="app">
        <span class="text">{{ num7 }}</span>
        <div @click="handleClick7" class="btn">7</div>
      </div>
      <div class="app">
        <span class="text">{{ num8 }}</span>
        <div @click="handleClick8" class="btn">8</div>
      </div>
      <div class="app">
        <span class="text">{{ num9 }}</span>
        <div @click="handleClick9" class="btn">9</div>
      </div>
    </div>
    <div class="container">
      <div class="app">
        <span class="text">{{ num4 }}</span>
        <div @click="handleClick4" class="btn">4</div>
      </div>
      <div class="app">
        <span class="text">{{ num5 }}</span>
        <div @click="handleClick5" class="btn">5</div>
      </div>
      <div class="app">
        <span class="text">{{ num6 }}</span>
        <div @click="handleClick6" class="btn">6</div>
      </div>
    </div>
    <div class="container">
      <div class="app">
        <span class="text">{{ num1 }}</span>
        <div @click="handleClick1" class="btn">A</div>
      </div>
      <div class="app">
        <span class="text">{{ num2 }}</span>
        <div @click="handleClick2" class="btn">2</div>
      </div>
      <div class="app">
        <span class="text">{{ num3 }}</span>
        <div @click="handleClick3" class="btn">3</div>
      </div>
    </div>
    <div class="container">
      <div class="app">
        <span class="text"></span>
        <div @click="reset" class="btn">shuffle</div>
      </div>
      <div class="app">
        <span class="text">{{ num10 }}</span>
        <div @click="handleClick10" class="btn">10</div>
      </div>
      <div class="app">
        <div class="calc" @click="hanleCalc">hit</div>
      </div>
      <div class="app">
        <div class="totle">{{ totleNum }}</div>
      </div>
    </div>
    <div>
      <div class="ipt">
        <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
        <div :class="result > 50 ? 'safe' : 'danger'">
          {{ result.toFixed(2) }}%
        </div>
        <!-- <div class="result">{{ realNum }}/{{ totleNum }}</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      num1: 12,
      num2: 12,
      num3: 12,
      num4: 12,
      num5: 12,
      num6: 12,
      num7: 12,
      num8: 12,
      num9: 12,
      num10: 48,
      result: 0,
      inputValue: null,
      difValue: null,
      totleNum: 156,
      realNum: 0,
    };
  },
  methods: {
    handleClick1() {
      this.num1 = this.num1 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick2() {
      this.num2 = this.num2 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick3() {
      this.num3 = this.num3 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick4() {
      this.num4 = this.num4 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick5() {
      this.num5 = this.num5 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick6() {
      this.num6 = this.num6 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick7() {
      this.num7 = this.num7 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick8() {
      this.num8 = this.num8 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick9() {
      this.num9 = this.num9 - 1;
      this.totleNum = this.totleNum - 1;
    },
    handleClick10() {
      this.num10 = this.num10 - 1;
      this.totleNum = this.totleNum - 1;
    },
    reset() {
      this.num1 = 12;
      this.num2 = 12;
      this.num3 = 12;
      this.num4 = 12;
      this.num5 = 12;
      this.num6 = 12;
      this.num7 = 12;
      this.num8 = 12;
      this.num9 = 12;
      this.num10 = 48;
      this.inputValue = 1;
      this.result = 0;
      this.totleNum = 156;
    },
    hanleCalc() {
      this.realNum = 0;
      this.difValue = 21 - this.inputValue;
      this.totleNum =
        this.num1 +
        this.num2 +
        this.num3 +
        this.num4 +
        this.num5 +
        this.num6 +
        this.num7 +
        this.num8 +
        this.num9 +
        this.num10;
      if (this.difValue >= 1) {
        this.realNum = this.realNum + this.num1;
      }
      if (this.difValue >= 2) {
        this.realNum = this.realNum + this.num2;
      }
      if (this.difValue >= 3) {
        this.realNum = this.realNum + this.num3;
      }
      if (this.difValue >= 4) {
        this.realNum = this.realNum + this.num4;
      }
      if (this.difValue >= 5) {
        this.realNum = this.realNum + this.num5;
      }
      if (this.difValue >= 6) {
        this.realNum = this.realNum + this.num6;
      }
      if (this.difValue >= 7) {
        this.realNum = this.realNum + this.num7;
      }
      if (this.difValue >= 8) {
        this.realNum = this.realNum + this.num8;
      }
      if (this.difValue >= 9) {
        this.realNum = this.realNum + this.num9;
      }
      if (this.difValue >= 10) {
        this.realNum = this.realNum + this.num10;
      }
      this.result = (this.realNum / this.totleNum) * 100;
    },
  },
};
</script>

<style>
* {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}
.page {
  padding-top: 350px;
  padding-left: 1200px;
}
.container {
  display: flex;
  margin: 10px 0;
}
.app {
  width: 90px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-right: 10px;
}
.text {
  position: absolute;
  left: 0;
  top: 0;
}
.btn {
  width: 90px;
  height: 90px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: red;
}
.btn:active {
  background-color: #cf3e11;
}
.ipt {
  display: flex;
  align-items: center;
}
.calc {
  width: 90px;
  height: 90px;
  background-color: #93cb23;
  display: flex;
  justify-content: center;
  align-items: center;
}
.safe {
  font-size: 30px;
  color: rgb(107, 220, 112);
  margin: 0 10px;
}
.danger {
  font-size: 30px;
  color: red;
  margin: 0 10px;
}
.totle {
  font-size: 30px;
}
.el-input {
  width: 200px;
}
</style>
